<template>
    <div class="album" v-if="isshow">
        <!-- 头部 -->
        <header>剧照({{ photos.length }})
            <img @click="isshow = false" class="back" src="@/assets/imgs/back.png" alt="">
        </header>
        <!-- 相册列表 -->
        <div class="list">
            <div @click="preview(item)" class="item" v-for="(item, index) in photos" :key="index">
                <img :src="item" alt="">
            </div>
        </div>
        <mypreview ref="mypreview"></mypreview>
    </div>
</template>

<script>
import Mypreview from '@/components/Mypreview.vue'
export default {
    data() {
        return {
            isshow: false
        }
    },
    methods: {
        preview(_path) {
            this.$refs.mypreview.show_preview(_path)
        },
        album_isshow() {
            this.isshow = true
        }
    },
    components: { Mypreview },
    props: {
        photos: {
            type: Array,
        }
    }
}
</script>

<style lang="less" scoped>
@import '@/assets/Less/common.less';

.album {
    background-color: #fff;
    .position(fixed, 0, 0, 0, 0);

    header {
        .flex();
        background-color: #fff;
        height: 50px;

        .back {
            width: 30px;
            height: 30px;
            .position(absolute, 10px, auto, 10px, auto)
        }
    }

    .list {
        overflow: hidden;

        .item {
            float: left;
            width: 33.33%;
            height: calc(100vw / 3);
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>